<template>
	<div class="app-container">
		<el-card class="box-card">
			<div v-if="showSearch" slot="header" class="clearfix">
				<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="120px">
					<el-form-item label="合伙人名称：" prop="username">
						<el-input v-model.trim="queryParams.username" placeholder="请输入合伙人名称" clearable size="small" />
					</el-form-item>

					<el-form-item label="合伙人手机号：" prop="mobile">
						<el-input v-model.trim="queryParams.mobile" placeholder="请输入合伙人手机号码" clearable size="small" />
					</el-form-item>
					<el-form-item label="合伙人类型：" prop="type">
						<el-select v-model.trim="queryParams.type" placeholder="请选择">
							<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" style="padding: 10px 38px; margin-left: 20px">搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="margin-bottom: 20px">
				<el-button type="primary" style="padding: 10px 13px; height: 36px; font-size: 12px">Excel导出</el-button>
			</div>
			<el-table v-loading="loading" stripe :data="partnerList" @selection-change="handleSelectionChange">
				<el-table-column :formatter="emptyToString" type="selection" width="55" align="center" />
				<el-table-column :formatter="emptyToString" label="编号" align="center" prop="id" />
				<el-table-column :formatter="emptyToString" label="合伙人名称" align="center" prop="username" />
				<el-table-column :formatter="emptyToString" label="合伙人手机号" align="center" prop="mobile"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="合伙人类型" prop="type">
					<template slot-scope="scope">{{ scope.row.type | formatType }}</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" label="订单编号" align="center" prop="provinceCityDistrict"> </el-table-column>
				<el-table-column :formatter="emptyToString" label="总奖金" align="center" prop="address"> </el-table-column>
				<el-table-column :formatter="emptyToString" label="奖金" align="center" prop="address"> </el-table-column>
				<el-table-column :formatter="emptyToString" label="创建时间" align="center" prop="createTime" />
			</el-table>

			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		</el-card>

		<!-- 添加或编辑合伙人对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="用户：">
					<el-select v-model.trim="form.uuid" placeholder="请选择">
						<el-option v-for="item in userOptions" :key="item.uuid" :label="item.username" :value="item.uuid" :disabled="item.status == 1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="合伙人名称：" prop="username">
					<el-input v-model.trim="form.username" placeholder="请输入合伙人名称" />
				</el-form-item>
				<el-form-item label="合伙人手机号码：" prop="mobile">
					<el-input v-model.trim="form.mobile" placeholder="请输入合伙人手机号码" />
				</el-form-item>
				<el-form-item label="合伙人类型：" prop="type">
					<el-select v-model.trim="form.type">
						<el-option v-for="type in type" :key="type.value" :label="type.label" :value="type.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="省：" placeholder="省" prop="area">
					<el-select v-model.trim="form.province" @change="areaChange">
						<el-option v-for="areas in area" :key="areas.objId" :label="areas.name" :value="areas.objId" />
					</el-select>
				</el-form-item>
				<el-form-item label="市：" placeholder="市">
					<el-select v-model.trim="form.city" @change="districtAddress">
						<el-option v-for="type in municipalAddress" :key="type.objId" :label="type.name" :value="type.objId" />
					</el-select>
				</el-form-item>
				<el-form-item label="区：" placeholder="区">
					<el-select v-model.trim="form.county">
						<el-option v-for="type in district" :key="type.objId" :label="type.name" :value="type.objId" />
					</el-select>
				</el-form-item>
				<el-form-item label="合伙人详细地址：" prop="address">
					<el-input v-model.trim="form.address" placeholder="请输入合伙人详细地址" />
				</el-form-item>
				<el-form-item label="身份证头像面：">
					<div style="color: #f14a46">图片要求:宽高相等且大于480px大小3M内</div>
					<image-upload v-model.trim="form.frontOfIdCard" :limit="1"></image-upload>
				</el-form-item>
				<el-form-item label="身份证国徽面：">
					<div style="color: #f14a46">图片要求:宽高相等且大于480px大小3M内</div>
					<image-upload v-model.trim="form.backOfIdCard" :limit="1"></image-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">保 存</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="详情" :visible.sync="openDetails" width="780px" :before-close="handleClose">
			<div class="content">
				<div class="content-info">
					<div class="info">
						<div>
							<span class="label">用户ID：</span><span class="text">{{ info.id }}</span>
						</div>
						<div>
							<span class="label">手机号码：</span><span class="text">{{ info.mobile }}</span>
						</div>
					</div>
					<div class="info">
						<div>
							<span class="label">合伙人名称：</span><span class="text">{{ info.username }}</span>
						</div>
						<div>
							<span class="label">合伙人手机号：</span><span class="text">{{ info.mobile }}</span>
						</div>
					</div>
					<div class="info">
						<div>
							<span class="label">合伙人类型：</span><span class="text">{{ info.type | formatType }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">详细地址：</span><span class="text">{{ info.provinceCityDistrict || '' }}{{ info.address }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div><span class="label">身份证图片</span><span class="text" style="opacity: 0"></span></div>
					</div>
					<div class="image__preview" style="margin-top: 20px">
						<el-image class="image" :z-index="9999" :src="info.frontOfIdCard" :preview-src-list="[info.frontOfIdCard]"> </el-image>
						<el-image class="image" :z-index="9999" :src="info.approvalStatus" :preview-src-list="[info.approvalStatus]"> </el-image>
					</div>
				</div>
			</div>
		</el-dialog>

		<el-dialog title="审核" :visible.sync="audit" width="780px">
			<div class="content">
				<div class="title">审核</div>
				<div class="content-info">
					<div class="info">
						<div>用户ID：{{ info.id }}</div>
						<div>手机号码：{{ info.mobile }}</div>
					</div>
					<div class="info info2">
						<div>合伙人名称：{{ info.username }}</div>
						<div>合伙人手机号：{{ info.mobile }}</div>
					</div>
				</div>
				<div style="margin-top: 20px">详细地址：{{ info.address }}</div>
				<div>身份证头像面</div>
				<div class="demo-image__preview" style="margin-top: 20px">
					<el-image :z-index="9999" style="width: 100px; height: 100px" :src="info.frontOfIdCard" :preview-src-list="[info.frontOfIdCard]"> </el-image>
				</div>
				<div>身份证头徽面</div>
				<div class="demo-image__preview" style="margin-top: 20px">
					<el-image :z-index="9999" style="width: 100px; height: 100px" :src="info.approvalStatus" :preview-src-list="[info.approvalStatus]"> </el-image>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="auditPartner(2, info.id)">驳 回</el-button>
					<el-button @click="auditPartner(1, info.id)">通 过</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listpartner, getpartner, delpartner, addpartner, updatepartner, exportpartner, getPartnerUser, getArea, municipalAddress, getCity } from '@/api/mall/partner';
import { getFeedback } from '@/api/mall/feedback';
import { changeUserStatus, getUser } from '@/api/system/user';
import { updateUser } from '@/api/mall/user';

const defaultTypeOptions = [
	{
		label: '区代',
		value: 0,
	},
	{
		label: '市代',
		value: 1,
	},
	{
		label: '省代',
		value: 2,
	},
];

const approvalStatus = [
	{
		label: '待审核',
		value: 0,
	},
	{
		label: '审核成功',
		value: 1,
	},
	{
		label: '审核失败',
		value: 2,
	},
];

export default {
	name: 'Partner',
	components: {},
	filters: {
		formatType(type) {
			for (let i = 0; i < defaultTypeOptions.length; i++) {
				if (type === defaultTypeOptions[i].value) {
					return defaultTypeOptions[i].label;
				}
			}
			return '';
		},
		approvalStatus(type) {
			for (let i = 0; i < approvalStatus.length; i++) {
				if (type === approvalStatus[i].value) {
					return approvalStatus[i].label;
				}
			}
			return '';
		},
	},
	data() {
		return {
			// 遮罩层
			loading: false,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 合伙人类型字典
			partnerType: [],
			// 合伙人表格数据
			partnerList: [],
			//用户选项
			userOptions: [],
			area: [],
			municipalAddress: [],
			district: [],
			// 弹出层标题
			title: '',
			info: {},
			openDetails: false,
			// 是否显示弹出层
			open: false,
			audit: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				id: null,
				username: null,
				mobile: null,
				type: null,
				approvalStatus: null,
				status: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				username: [{ required: true, message: '合伙人名称不能为空', trigger: 'blur' }],
				frontOfIdCard: [
					{
						required: true,
						message: '合伙人身份证头像面不能为空',
						trigger: 'blur',
					},
				],
				backOfIdCard: [
					{
						required: true,
						message: '合伙人身份证头徽面不能为空',
						trigger: 'blur',
					},
				],
				address: [
					{
						required: true,
						message: '合伙人详细地址不能为空',
						trigger: 'blur',
					},
				],
				type: [
					{
						required: true,
						message: '类型：0 区县， 1 市， 2 省不能为空',
						trigger: 'blur',
					},
				],
				lastLoginIp: [
					{
						required: true,
						message: '最近一次登录IP地址不能为空',
						trigger: 'blur',
					},
				],
				mobile: [
					{
						required: true,
						message: '合伙人手机号码不能为空',
						trigger: 'blur',
					},
				],
				weixinOpenid: [
					{
						required: true,
						message: '微信登录openid不能为空',
						trigger: 'blur',
					},
				],
				sessionKey: [
					{
						required: true,
						message: '微信登录会话KEY不能为空',
						trigger: 'blur',
					},
				],
				status: [
					{
						required: true,
						message: '0 可用, 1 禁用, 2 注销不能为空',
						trigger: 'blur',
					},
				],
			},
			type: [
				{ label: '区代', value: 0 },
				{ label: '市代', value: 1 },
				{ label: '省代', value: 2 },
			],
			approvalStatus: [
				{ label: '待审核', value: 0 },
				{ label: '审核通过', value: 1 },
				{ label: '审核失败', value: 2 },
			],
		};
	},
	created() {
		// this.getList();
	},
	methods: {
		handleClose() {
			this.openDetails = false;
		},

		areaChange(event) {
			this.$set(this.form, 'city', '');
			this.$set(this.form, 'county', '');
			municipalAddress({
				id: event,
			}).then((response) => {
				this.municipalAddress = response.data;
			});
		},

		districtAddress(event) {
			this.$set(this.form, 'county', '');
			municipalAddress({
				id: event,
			}).then((response) => {
				this.district = response.data;
			});
		},

		auditPartner(event, row) {
			updatepartner({
				id: row,
				approvalStatus: event,
			}).then((response) => {
				this.audit = false;
				this.msgSuccess('审核成功');
				this.getList();
			});
		},

		showDetails(id) {
			getpartner(id).then((response) => {
				this.info = response.data;
				this.openDetails = true;
			});
		},

		statusChange(event, row) {
			this.loading = true;
			updatepartner({
				id: row,
				status: event,
			}).then((response) => {
				this.msgSuccess('编辑成功');
				this.getList();
			});
		},
		getList() {
			this.loading = true;
			listpartner(this.queryParams).then((response) => {
				this.partnerList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},

		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				username: null,
				mobile: null,
				type: null,
				approvalStatus: null,
				weixinOpenid: null,
				sessionKey: null,
				status: 0,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			getPartnerUser().then((response) => {
				this.reset();
				this.userOptions = response.users;
				this.open = true;
				this.title = '添加用户';
			});
			getArea().then((response) => {
				this.area = response.data;
			});
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			console.log('进入');
			this.reset();
			const userId = row.id;
			getPartnerUser(userId).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '编辑合伙人';
			});
			getArea().then((response) => {
				this.area = response.data;
			});
			getCity({ id: row.province }).then((response) => {
				this.municipalAddress = response.data;
			});
			getCity({ id: row.city }).then((response) => {
				this.district = response.data;
			});
		},

		partner(row) {
			this.reset();
			const id = row.id || this.ids;
			getpartner(id).then((response) => {
				this.info = response.data;
				this.audit = true;
				this.title = '审核';
			});
		},

		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					let obj = {
						mobile: this.form.mobile,
						username: this.form.username,
						uuid: this.form.uuid,
						regionId: this.form.county,
						province: this.form.province,
						city: this.form.city,
						county: this.form.county,
						type: this.form.type,
						address: this.form.address,
						frontOfIdCard: this.form.frontOfIdCard,
						backOfIdCard: this.form.backOfIdCard,
					};
					if (this.form.mobile.length != 11) {
						this.$message.error('电话号码格式有误!');
						return;
					}
					if (this.form.id != null) {
						obj.id = this.form.id;
						updatepartner(obj).then((response) => {
							this.msgSuccess('编辑成功');
							this.open = false;
							this.getList();
						});
					} else {
						addpartner(obj).then((response) => {
							this.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id ? [row.id] : this.ids;
			this.$confirm('是否确认删除合伙人编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delpartner(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有合伙人数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportpartner(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style scoped lang="scss">
.content {
	.content-info {
		.title {
			font-size: 16px;
			font-weight: 900;
			margin-bottom: 20px;
			padding-left: 30px;
		}
		.image__preview {
			display: flex;
			justify-content: center;
			.image {
				width: 329px;
				height: 162px;
				margin: 0 10px;
				display: block;
				border-radius: 8px;
			}
		}
		.info {
			display: flex;
			margin-bottom: 25px;

			> div {
				width: 50%;
				height: 40px;
				line-height: 40px;
				display: flex;
				color: #333333;
				justify-content: center;
				.label {
					width: 85px;
					font-size: 12px;
				}
				.text {
					width: 225px;
					background: #f7f7f7;
					font-size: 14px;
					box-sizing: border-box;
					padding-left: 12px;
				}
			}
		}
		.info-plus {
			> div {
				width: 100%;
				.text {
					width: 593px;
				}
			}
		}
	}
}
</style>
